<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>绑定手机号</title>
    <link rel="stylesheet" type="text/css" href="../../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../../css/main.css" />
    <style>
        .back {
            width: 8px !important;
            height: 15px !important;
            margin-left: 3px !important;
            background: #fff;
        }

        body {
            background-color: #fff;
        }

        #vm {
            overflow: hidden;
        }

        .telephone {
            position: relative;
        }

        .codeactive {
            color: #EA5717;
        }

        span {
            font-size: 12px;
            color: #333;
        }

        .password-fourth {
            margin-top: 50px;
            background: #ea5413;
            border-radius: 8px;
            height: 34px;
            text-align: center;
            line-height: 34px;
            color: #fff;
            font-size: 15px;
        }

        .xieding {
            color: #EA5717;
        }

        input {
            font-size: 14px !important;
            height: 1.2rem !important;
        }

        .code {
            position: absolute;
            right: 0px;
            top: 20px;
            text-align: right;
            color: #DAD9D9;
            font-size: 13px !important;
            width: 80px;
        }

        .downward {
            width: 10px;
            height: 8px;
            display: inline;
        }

        .shurukuang {
            position: absolute;
            left: 67px;
        }

        .codeactive {
            color: #EA5717;
        }

        .fourth {
            margin-top: 40px !important;
            border-radius: 8px !important;
            height: 34px !important;
            text-align: center !important;
            line-height: 34px !important;
            color: #fff !important;
            font-size: 15px !important;
            background: #DAD9D9;
            width: 100%;
            border: none;
        }
    </style>
</head>

<body>
    <div id="vm" v-cloak>
        <header class="aui-bar aui-bar-nav" id="aui-header" style="background-color:#fff;">
            <a class="aui-btn aui-pull-left" tapmode onclick="CloseWin()">
                <img src="../../image/back.png" class="back" alt="">
            </a>
            <div class="aui-title" style="color:#000;">绑定手机号222</div>
        </header>


        <div class="big-box">
            <div class="content">
                <div class="telephone">
                    <span onclick="Openphone()">+{{guojianumber}}<img src="../../image/login/downward.png" class="downward"></span>
                    <input type="text" placeholder="请输入手机号" style="text-align:left;position:absolute;bottom:4px;left:70px;width:54%;" v-model="phonevalue" v-on:input="mobileinput">
                    <img src="../../image/login/delete.png" class="delete" @click="qingchu()">

                </div>
                <div class="telephone">
                    验证码
                    <input type="text" placeholder="短信验证码" style="text-align:left;position:absolute;bottom:4px;left:70px" v-model="msg" v-on:input="msginput">
                    <input type="button" value="获取验证码" class="code" id="dao" @click="countdown()">
                </div>

                <button class="fourth" @click="submit()" disabled v-if="isbukedianji">绑定</button>
                <button class="fourth" @click="submit()" v-else>绑定</button>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.2.5.js"></script>
<script type="text/javascript" src="../../script/zepto.js"></script>
<script type="text/javascript" src="../../script/config.js"></script>
<script type="text/javascript" src="../../script/rest.js"></script>
<script type="text/javascript" src="../../script/login.js"></script>
<script type="text/javascript" src="../../script/faskclick.js"></script>
<script type="text/javascript" src="../../script/jiguang.js"></script>
<script type="text/javascript">
    //关闭

    var uid, session, mobile;

    var vm = new Vue({
        el: '#vm',
        data: {
            phonevalue: '',
            msg: '',
            guojianumber: '86',
            // thirdbindflag:false,
            isshowdelete: false,
            passwordvalue: '',
            isbukedianji: true


        },
        created: function() {
            var _this = this;
            apiready = function() {
                _this.init();
                api.parseTapmode();
                var header = $api.byId('aui-header');
                $api.fixStatusBar(header);
                if ('addEventListener' in document) {
                    document.addEventListener('DOMContentLoaded', function() {
                        FastClick.attach(document.body);
                    }, false);
                }
            }
        },
        methods: {
            init: function() {
                var _this = this;
                api.addEventListener({
                    name: 'keyback'
                }, function(ret, err) {
                    api.closeWin();
                });
                _this.msg = '';
                // _this.phonevalue = $api.getStorage('mobile1');
                api.addEventListener({
                    name: 'number'
                }, function(ret, err) {
                    if (ret) {
                        _this.guojianumber = ret.value.number
                    }
                });
                if (_this.phonevalue.length > 0) {
                    $('.code').addClass('codeactive');
                }

            },

            mobileinput() {
                var _this = this;
                if (_this.phonevalue.length > 0) {
                    _this.isshowdelete = true;
                    $('.code').addClass('codeactive');
                } else {
                    _this.isshowdelete = false;
                    $('.code').removeClass('codeactive');

                }
                if (this.phonevalue && this.msg) {
                    $('.fourth').addClass('fourthactive');
                    _this.isbukedianji = false;
                } else {
                    $('.fourth').removeClass('fourthactive');
                    _this.isbukedianji = true;
                }

            },
            jiaodian() {
                // 输入框获取焦点
                var _this = this;
                _this.isshowdelete = true
            },
            shijiaodian() {
                // 输入框失去焦点
                var _this = this;
                // _this.isshowdelete = false;
                api.sendEvent({
                    name: 'phonet',
                    extra: {
                        key1: _this.mobile,

                    }
                });
            },
            qingchu: function() {
                var _this = this;
                _this.phonevalue = '';
                _this.isshowdelete = false
                $('.code').removeClass('codeactive');

            },
            msginput() {
                this.msg = this.msg.substr(0, 4);
                // if (this.msg) {
                //     $('.code').addClass('codeactive');
                // } else {
                //     $('.code').removeClass('codeactive');
                // }
                if (this.phonevalue && this.msg) {
                    $('.fourth').addClass('fourthactive');
                    this.isbukedianji = false;
                } else {
                    $('.fourth').removeClass('fourthactive');
                    this.isbukedianji = true;
                }
            },
            submit: function() {
                var _this = this;
                if (M.phone(_this.phonevalue)) {
                    if (M.yanzhengma(_this.msg)) {
                        new rest().get('getMobileSms').datae({
                            'mobile': _this.guojianumber + _this.phonevalue,
                            'msg': _this.msg,
                        }).success(function(res) {
                          // alert(JSON.stringify(res))
                            $api.setStorage('mobile', _this.guojianumber + _this.phonevalue);
                            if (res.flag == 0) {
                                api.toast({
                                    msg: '验证码错误',
                                    duration: 2000,
                                    location: 'middle'
                                });
                                setTimeout(function() {
                                    api.closeWin();
                                }, 200)
                            } else {

                                var data0 ={};
                                data0['mobile'] = _this.guojianumber + _this.phonevalue
                              new rest().get('getUserInfoByMobile').datae(data0).success(function(res2) {
                                // alert(JSON.stringify(res2))
                                // console.log(JSON.stringify(res2))
                                  if (res2.flag == 1) {
                                    var data = {};
                                    var third = api.pageParam.third;
                                    var thirdopenid = api.pageParam.thirdopenid;
                                    if (third == 'wx') {
                                        third = 'weixin'
                                    }
                                    var deviceId = api.deviceId;
                                    data['device_id'] = deviceId;
                                    data[third] = thirdopenid;
                                    data['mobile'] = _this.guojianumber + _this.phonevalue;
                                    var uname = api.pageParam.uname;
                                    if (third == 'weixin') {
                                        data['wxname'] = uname
                                    } else if (third == 'qq') {
                                        data['qqname'] = uname
                                    } else if (third == 'weibo') {
                                        data['weiboname'] = uname
                                    }
                                  if (res.msg) {
                                    new rest().get('registerThird').datae(data).success(function(res3) {
                                        if (res3.flag == 1) {
                                          jiguang.bingdalias(res.msg.uid)
                                            $api.setStorage('uid', res3.msg.uid);
                                            $api.setStorage('session', res3.msg.session);
                                            api.sendEvent({
                                                name: 'loginsuccess',
                                            });
                                            if (res2.qqname||res2.wxname||res2.weiboname) {
                                            }else {
                                               _this.finishUserInfo({_uid:res3.msg.uid,nickname:uname,session:res3.msg.session})
                                              // _this.finishUserInfo({_uid:res.msg.uid,nickname:uname,session:res.msg.session})
                                            }
                                            api.toast({
                                                msg: '绑定成功',
                                                duration: 2000,
                                                location: 'middle'
                                            });
                                            setTimeout(function() {
                                                api.closeWin();
                                            }, 2000);
                                        }else {
                                          api.toast({
                                              msg: res3.msg,
                                              duration: 2000,
                                              location: 'bottom'
                                          });

                                        }

                                    }).error(function(err) {
                                        api.toast({
                                            msg: err.msg,
                                            duration: 2000,
                                            location: 'center'
                                        });
                                    }).run()
                                  } else {
                                      api.openWin({
                                          name: 'thirdpassword',
                                          url: '../login/thirdpassword.html',
                                          pageParam: {
                                              third: api.pageParam.third,
                                              thirdopenid: api.pageParam.thirdopenid,
                                              mobilevalue: _this.guojianumber + _this.phonevalue,
                                              uname: api.pageParam.uname
                                          }
                                      });

                                  }
                                  }
                              }).error(function(err) {
                                  api.toast({
                                      msg: err.msg,
                                      duration: 2000,
                                      location: 'center'
                                  });
                              }).run()


                            }
                        }).error(function(err) {
                            api.toast({
                                msg: err.msg,
                                duration: 2000,
                                location: 'middle'
                            });
                        }).run()
                    }
                }
            },
            finishUserInfo:function(data) {
              new rest().get('finishUserInfo').datae(data).success(function(res) {
                  if (res.flag == 1) {
                      api.toast({
                          msg: '设置成功',
                          duration: 2000,
                          location: 'middle'
                      });
                  } else {
                      api.toast({
                          msg: res.msg,
                          duration: 2000,
                          location: 'middle'
                      });
                  }
                  console.log(JSON.stringify(res))
              }).error(function(err) {
                  console.log(JSON.stringify(err))
              }).run()

            },
            countdown: function() {
                var _this = this;
                var name = document.getElementById("dao").className;
                if (M.phone(_this.phonevalue)) {
                    new rest().get('sendSms2').datae({
                        'mobile': _this.guojianumber + _this.phonevalue
                    }).success(function(res) {
                        if (res.flag == 1) {
                            api.toast({
                                msg: '发送成功',
                                duration: 2000,
                                location: 'middle'
                            });
                            msgflag = true;
                            M.daojishi(msgflag, name)
                        } else {
                            msgflag = false;
                            M.daojishi(msgflag, name)
                            api.toast({
                                msg: res.msg,
                                duration: 2000,
                                location: 'middle'
                            });
                        }
                    }).error(function(err) {
                        api.toast({
                            msg: err.msg,
                            duration: 2000,
                            location: 'middle'
                        });

                    }).run()
                }
            },
        }
    })

    function CloseWin() {
        api.closeWin();

    }

    function Openphone() {
        api.openWin({
            name: 'arearegion',
            url: './area-region-win.html',

        });
    }
</script>

</html>
